Ah interesting ; try adding a min-height: 80px to the img tag's css. My guess would be at the beginning, since no height is specified, all the images have a height of effectively 1px. This means they are all on screen, causing the loading=lazy to have no effect. Also add a comment describing why the min-height was added to the CSS; that'll help future folks!

@cdrini @RayBB Added minimum height

@Realmbird in your testing did adding that height effect anything?
As far as I can tell, it didn't.
@cdrini from my research, since we aren't rendering the Vue serverside, the lazy-loading doesn't work as expected since the html is created by vue after the page is loaded. That's why there are libraries like https://github.com/alexjoverm/v-lazy-image

So this PR has a mild effect but doesn't quite do what we want and it looks like that's not simple to do.
I propose
1: We merge it with lazy loading as is for the mild gain
2. Look into this again after we upgrade to Vue 3 and maybe considering doing some server side rendering to avoid this issue (I don't know if we can really do that but we could investigate then).

Ah my bad, I just realized this was for the edition snippet! The edition snippet is working with loading="lazy" 👍 You can see it working as you scroll, and images load in. The fact that it's client-side shouldn't affect this ; I've used loading="lazy" with Vue many times and it works quite well.

It's the work covers that need to have loading="lazy" also added, and, potentially, need a min-height.

These:

So you can:

1. remove the min-height here
2. add loading="lazy" to the above images, and, if needed, add min-height to those images.

@Realmbird do you think you could incorporate drini's feedback?

@Realmbird still interested in working on this one?

No sorry forgot to unassign

Closing this so someone else can work on it.
Thanks for your efforts